<template>
  <div class="form-wrapper">
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
      <div class="captcha-frame-wrapper">
        <QrcodeVue :value="scanCode" :size="200"></QrcodeVue>
      </div>
    </el-form>
    <div class="login-btn">
      <el-button :icon="Refresh" @click="getScanCode()" type="primary" :loading="loading"> 刷新二维码 </el-button>
    </div>
    <div class="info-wrapper">
      <el-checkbox v-model="checked2"> </el-checkbox>
      <span class="note note-ml10">我已阅读并同意千万职联 </span>
      <el-button type="primary" link class="info-btn">用户协议</el-button> <span class="note">和</span>
      <el-button type="primary" link class="info-btn">隐私条款</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElForm } from "element-plus";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { bizLoginSC, bizScanCode } from "@/biz/modules/user";
import QrcodeVue from "qrcode.vue";

const loading = ref(false);
const checked2 = ref(true);
const scanCode = ref("");
const intervalId = ref(null);
// 登录表单数据
const loginForm = reactive({
  clientId: "33f25d5380d6a9ff4c2abc782ca3c911",
  clientPassword: "C19152147AB60D08653B34864A1A7D11"
});
// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  code: [{ required: true, message: "请输入短信验证码", trigger: "blur" }]
});
// 获取验证码
const getScanCode = () => {
  bizScanCode()
    .then(res => {
      if (res.data) {
        // ElMessage.error("接收到的数据." + res.data);
        scanCode.value = res.data || "";

        // 开始刷数据;
        refreshLogin();
      }
    })
    .catch(err => {
      console.log(err);
    });
};

// 这个方法定时去跑
const login = async () => {
  try {
    let res = await bizLoginSC({ ...loginForm, scanCode: scanCode.value });
    if (res) {
      if (intervalId.value) {
        window.clearInterval(intervalId.value);
      }
    }
  } finally {
  }
};

// 刷这个码
const refreshLogin = () => {
  // console.log(intervalId.value);
  if (intervalId.value) {
    window.clearInterval(intervalId.value);
  }

  intervalId.value = window.setInterval(() => {
    totalTime.value = totalTime.value - 1;
    // 检测一下登录的情况
    login();

    if (totalTime.value < 0) {
      window.clearInterval(intervalId.value);
      totalTime.value = 60;
    }
  }, 3000);
};

const totalTime = ref(60);

onMounted(() => {
  // 监听enter事件（调用登录）
  getScanCode();
  // 开始刷新登录的事件
  refreshLogin();
});

onUnmounted(() => {
  if (intervalId.value) {
    window.clearInterval(intervalId.value);
  }
});
</script>
<style scoped lang="scss">
.form-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
}
.el-form-item {
  margin-bottom: 20px;
}
.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  white-space: nowrap;
  .el-button {
    width: 50%;
  }
}

.captcha-frame-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .captcha-frame {
    width: 48%;
  }
  .captcha-box {
    width: 48%;
    height: 2.5rem;
    cursor: pointer;
    & img {
      width: 100%;
      height: 100%;
    }
  }
}

.info-wrapper {
  position: absolute;
  width: 100%;
  bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  .note {
    color: var(--el-color-info);
    font-size: 12px;
    font-weight: 600;
  }

  .note-ml10 {
    margin-left: 10px;
  }

  .info-btn {
  }
}
</style>
